<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="resources/css/ui-lightness/jquery-ui-1.10.4.custom.css" />
    <style>
        body { font-size: 62.5% }
         h1 { text-align:center; }
        input[type="text"], label {
            margin-bottom: 12px; padding: .4em; 
            width: 95%;
            }
    </style>
    <script src="resources/js/jquery-1.10.2.js"></script>
    <script src="resources/js/jquery-ui-1.10.4.custom.min.js"></script>
    <script>
        $(function () {
        	 $('#open-button').click(function () {
                 $('#dialog').dialog('open');
             });
        	 $('#dialog').on('dialogcreate', function () {
                 alert('다이얼로그를 생성했습니다.');
             });
        	 
        	   $('#dialog').dialog({
        		   open: function () {

                   },
        		   autoOpen: false,
                   buttons: {
                       submit: function () {  
                       var eventName = $('#event-name').val();
                       var eventDate = $('#event-date').val();
                       // 출력합니다.
                       $('<h1></h1>').html(eventName + ' : ' + eventDate).appendTo('#output');
                       // 다이얼로그를 닫습니다.
                       $('#event-name').val('');
                       $('#event-date').val('');
                       $('#dialog').dialog('close'); },
                       reset: function () {
                       $('#event-name').val('');
                       $('#event-date').val('');},
                       cancel: function () {
                       $('#event-name').val('');
                       $('#event-date').val('');
                       $('#dialog').dialog('close');
                       }
                   },
                   modal: true
               });
        	   $('#event-date').datepicker({
                   dateFormat: 'yy년 mm월 dd일',
                   numberOfMonths: 3
               });
        });
    </script>
</head>
<body>
	 <h1 id="open-button">일정 생성</h1>
    <hr/>
    <div id="output"></div>
  <div id="dialog" title="jQuery UI dialog">
        <h1>Hello jQUery UI .. !</h1>
        <label for="event-name">일정 이름</label>
        <input id="event-name" type="text" />
        <label for="event-date">날짜</label>
        <input id="event-date" type="text" />
    </div>
</body>
</html>